<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>v-on event</title>
    </head>

    <body>

        <div id = "app">
            <input type = "button" value = "v-on指令" v-on:click = "doIt">
            <input type = "button" value = "v-on简写" @click = "doIt">
            <input type = "button" value = "双击事件" @dblclick = "doIt">
            <h2 @click = "changefood">{{ food }}</h2> 
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    food:"Simon"
                },
                methods: {
                    doIt:function() {
                        alert("doit No!");
                    },
                    changefood:function() {
                        console.log("Hi~");
                    }
                },
            })
        </script>
    </body>
</html>